
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
  <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">

<div class="wrapper wrapper-content" id="person">
    <div class="row">
        <div class="widget style1 navy-bg">
            <div class="row">
                <div class="col-xs-2">
                    Tips:
                </div>
                <div class="col-xs-10">
                    <span>{{tips}}  </span>
                    <h2 class="font-bold"></h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="widget-head-color-box navy-bg p-lg text-center">
                <div class="m-b-md">
                    <h2 class="font-bold no-margins">
                        {{person.name}}
                    </h2>
                    <small>{{person.auth}}</small>
                </div>
                <img :src="'http://q1.qlogo.cn/g?b=qq&nk='+person.qq+'&s=160'" class="img-circle circle-border m-b-md" alt="profile">
                <div>
                    <span>{{person.college}}</span> |
                    <span>{{person.major}}</span> |
                    <span>{{person.department}}</span>
                </div>
            </div>
            <div class="widget-text-box">
                <h4 class="media-heading">{{person.username}}</h4>
                <p></p>
                <p style="text-indent: 30px">qq:{{person.qq}}</p>
                <p style="text-indent: 30px">电话:{{person.phone}}</p>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="widget style1 yellow-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-sun-o fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> {{city}}气温 </span>
                            <h2 class="font-bold">{{wendu}}℃</h2>
                        </div>
                    </div>
                </div>
                <div class="widget style1 lazur-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-cloud fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> {{city}}天气 </span>
                            <h2 class="font-bold">{{weather}}</h2>
                        </div>
                    </div>
                </div>
                <div class="widget style1 blue-bg">
                    <div class="row">
                        <div class="col-xs-4">
                            <i class="fa fa-clock-o fa-5x"></i>
                        </div>
                        <div class="col-xs-8 text-right">
                            <span> 当前时间 </span>
                            <h2 class="font-bold" id="clock"></h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="tab-content">
                        <div id="contact-1" class="tab-pane active">
                                <div class="slimScrollDiv" style="position: relative; width: auto;"><div class="full-height-scroll" style="width: auto; height: 100%;">
                                    <strong>时间轴</strong>
                                    <div id="vertical-timeline" class="vertical-container light-timeline">
                                        <div v-for="m in monitor">
                                            <div class="vertical-timeline-block">
                                                <div class="vertical-timeline-icon navy-bg">
                                                    <i class="fa fa-briefcase"></i>
                                                </div>
                                                <div class="vertical-timeline-content">
                                                    <p>{{m.msg}}</p>
                                                    <span class="vertical-date">
                                                        <small>{{m.time}}</small>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="http://ip.ws.126.net/ipquery"></script>
<script>
    setInterval(getCurrentTime, 1000)

    function getCurrentTime () {
        let now =new Date ();
        let hh = now.getHours();
        let mm = now.getMinutes() > 10 ? now.getMinutes() :'0'+now.getMinutes();
        let ss = now.getSeconds() > 10 ? now.getSeconds() :'0'+ now.getSeconds();
        this.currentTime = hh +':' + mm +':' + ss;

        document.getElementById('clock').innerHTML=this.currentTime;
    }

    var person=new Vue({
      el:"#person",
      data:{
          person:{},
          city:'',
          wendu:'',
          weather:'',
          tips:'',
          monitor:[]
      },
      created:function () {
          this.$http.get('UserDataJson').then(
              (data)=>
              {
                  this.person=data.body;
                  console.log(data.body)
              }
          );
          this.$http.get('MonitorJson').then(
              (data)=>
              {
                  this.monitor=data.body;
              }
          )
      }
  })

</script>
<script type="text/javascript">
    dynamicIp(lc);//这是获取天气调用的方法 lc就是城市名称
    function dynamicIp(cityName){
        person.city=cityName;
        var url = encodeURI("http://wthrcdn.etouch.cn/weather_mini?city="+cityName);
        $.ajax({
            url: url,
            dataType: "json",
            async: false,
            success: function (data) {
                person.wendu=data.data.wendu;
                console.log(data.data);
                person.weather=data.data.forecast[0].type;
                person.tips=data.data.ganmao;
            }
        });

    }
</script>
</body>

</html>
